﻿@page "/MenuButton"

@using FluentUI.Demo.Shared.Pages.MenuButton.Examples

<PageTitle>@App.PageTitle("MenuButton")</PageTitle>

<h1>MenuButton</h1>

<p>A menu button is a button with a chevron icon after the text used to trigger a menu. Menu items can be supplied by both
   an <code>Items</code> parameter as well as manually as the <code>ChildContent</code> (at the same time).
</p>

<div class="demopanel" style="padding: 1rem; margin-bottom: 1rem;">
    <h5>FluentMenuProvider</h5>
    <p>
        With version 4.9.4 of the library, we introduced the <code>FluentMenuProvider</code> component. The MenuButton component has been updated to use this provider.
        The <code>&lt;FluentMenuProvider /&gt;</code> needs to be placed at the <b>bottom</b> of your HTML page (just like the other <b>...Providers</b> components).
        It will renders all menus (and menu items) at the provider location in the HTML structure. This allows for menus to appear <b>on top</b> other components.
    </p>

</div>


<h2 id="example">Example</h2>

<DemoSection Component="typeof(MenuButtonAccentColor)" Title="MenuButton to select accent color"  />

<DemoSection Component="typeof(MenuButtonManual)" Title="MenuButton with manually supplied items">
    <Description>
        Besides using the <code>Items</code> parameter, you can also directly enter <code>FluentMenuItem</code>s manually. This way you can
        use all that component's parameters and, for example, disable certain items.
    </Description>
</DemoSection>

<DemoSection Component="typeof(MenuButtonAppearance)" Title="Different button appearances" />

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentMenuButton)" />
